<template>
  <div>
    <label class="radio-label" style="padding-left:0;">文件名: </label>
    <el-input v-model="filename" placeholder="请输入导出文件上名称(default excel-list)" style="width: 350px;" prefix-icon="el-icon-document"/>
    <label class="radio-label">自动填充表头: </label>
    <el-radio-group v-model="autoWidth">
      <el-radio :label="true" border>
        True
      </el-radio>
      <el-radio :label="false" border>
        False
      </el-radio>
    </el-radio-group>
    <label class="radio-label">文件类型: </label>
    <el-select v-model="bookType" style="width:120px;">
      <el-option
          v-for="item in options"
          :key="item"
          :label="item"
          :value="item"
      />
    </el-select>
    <el-button type="primary" icon="el-icon-download" @click="handleDownload">
      Export
    </el-button>
  </div>
  <el-table
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column
        fixed
        prop="id"
        label="项目id"
        width="200"
      />
      <el-table-column
        prop="name"
        label="项目名称"
        width="200"
      />
      <el-table-column
        prop="username"
        label="申请人姓名"
        width="200"
      />
      <el-table-column
        prop="userId"
        label="申请人id"
        width="200"
      />
      <el-table-column
        prop="content"
        label="申请理由"
        width="335"
      />
      <el-table-column
        prop="state"
        label="状态"
        width="140"
      />
    </el-table>
</template>

<script>
  import http from "../../utils/req";

  export default {
  data() {
    return {
      options: ['xlsx', 'csv', 'txt'],
      tableData: [{
        id: '',
        name: '',
        username: '',
        userId:'',
        content: '',
        state:''
      }],
      listQuery: {
        id: '',
        name: '',
        username: '',
        userId:'',
        content: '',
        state:''
      },
      downloadLoading: false,
      filename: '',
      autoWidth: true,
      bookType: 'xlsx'
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData(){
      http.get('/ProjectJoinApply/findAllProjectJoinApplyVO', {params: this.listQuery}).then((value => {
        this.tableData = value.data
      }))
    },
    handleDownload() {
      this.downloadLoading = true
      import('../../utils/Export2Excel').then(excel => {
        const tHeader = ['项目id', '项目名称', '申请人姓名', '申请人id', '申请理由','状态']
        const filterVal = ['id', 'name', 'username', 'userId', 'content','state']
        const data = this.formatJson(filterVal)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: this.filename,
          autoWidth: this.autoWidth,
          bookType: this.bookType
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal) {
      return this.tableData.map(v => filterVal.map(j => {
        return v[j]
      }))
    }
  }
}
</script>

<style>
.radio-label {
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 30px;
}
</style>
